<template>
  <div class="evaluation-page">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="待评价" name="0"></el-tab-pane>
      <el-tab-pane label="已评价" name="1"></el-tab-pane>
    </el-tabs>
    <el-table ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style=" width: 100%"
              @selection-change="handleSelectionChange" v-loading="isLoading">
      <el-table-column type="index" width="100" label="序号"></el-table-column>
      <el-table-column prop="id" label="ID" width="200">
        <template slot-scope="scope">
          <a href="#" @click.prevent="navigateToDetail(scope.row.id)">
            {{ scope.row.id }}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="200"></el-table-column>
      <el-table-column prop="age" label="年龄" width="200"></el-table-column>
      <el-table-column prop="desValue" label="检查技术" width="200"></el-table-column>
      <el-table-column prop="evaluationStatus" label="评价状态" width="200">
        <template slot-scope="scope">{{ scope.row.evaluationStatus | formatEvaluationStatus }}</template>
      </el-table-column>
      <el-table-column prop="createDate" label="创建时间" width="250">
        <template slot-scope="scope">{{ scope.row.createDate | formatDate }}</template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size.sync="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper, ->"
        :total="totalItems"
        class="pagination-right">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getTasksPages } from '@/services/task'

export default {
  data () {
    return {
      activeTab: '0', // 默认选中的标签页
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        evaluationStatus: '0' // 默认评价状态
      },
      tableData: [],
      totalItems: 0,
      isLoading: false
    }
  },
  methods: {
    navigateToDetail (id) {
      this.$router.push({ name: 'task-create', params: { id } })
    },
    handleTabClick (tab) {
      this.queryParams.evaluationStatus = tab.name
      this.queryParams.pageNum = 1 // 重置页码为1
      this.loadData()
    },
    handleSizeChange (newSize) {
      this.queryParams.pageSize = newSize
      this.loadData()
    },
    handleCurrentChange (newPage) {
      this.queryParams.pageNum = newPage
      this.loadData()
    },
    async loadData () {
      this.isLoading = true
      const response = await getTasksPages(this.queryParams)
      if (response.data.code === 200) {
        this.tableData = response.data.data.list
        this.totalItems = response.data.data.total
      }
      this.isLoading = false
    }
  },
  filters: {
    formatDate (value) {
      if (value) {
        return new Date(value).toLocaleString('zh-CN', { hour12: false })
      }
      return ''
    },
    formatEvaluationStatus (value) {
      return value === 0 ? '待评价' : '已评价'
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style scoped>
.pagination-container {
  text-align: right; /* 这会将分页组件对齐到右边 */
}

.pagination-right .el-pagination {
  display: inline-block;
  margin: 0;
}
</style>
